<template>
  <div v-transfer-dom>
    <popup
      v-model="showPopup"
      position="bottom"
      width="100%"
      class="popup-wrapper"
      @on-hide="toggle(false)"
      @on-show="toggle(true)">
      <div style="text-align:center;">
        <div style="margin:10px 0;font-size:18px">
          目的地选择
        </div>
        <grid :cols="4" :show-lr-borders="false" :show-vertical-dividers="false">
          <grid-item v-for="item in addressList" :key="item.id">
            <div style="width:100%;height:100%;color:#000" @click="selectArea(item)">
              <span class="gridTimeStyle">{{item.name}}</span>
            </div>
          </grid-item>
        </grid>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup, Grid, GridItem } from 'vux'
import axios from '@/api/axiosApi'

export default {
  model: {
    prop: 'value',
    event: 'toggle'
  },
  props: {
    value: Boolean
  },
  directives: {
    TransferDom
  },
  components: {
    Popup, Grid, GridItem
  },
  data () {
    return {
      showPopup: this.value,
      addressList: []
    }
  },
  created () {
    this._getAddressList()
  },
  methods: {
    _getAddressList () {
      axios.get(this, `/v1/address/1`, {
        pageSize: 50
      }, (addressList) => {
        this.addressList = addressList
      }, null, false)
    },
    toggle (val) {
      this.$emit('toggle', val)
    },
    selectArea (item) {
      this.$emit('selectArea', item)
    }
  },
  watch: {
    value (val) {
      this.showPopup = val
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'

.popup-wrapper {
  margin-top: 44px;
  background: #fff;
  .gridTimeStyle{
    border 1px solid lightgrey 
    padding 4px 4px
    border-radius 4px
  }
}
</style>
